<template>
  <div>
    <!-- 引入列表组件 -->
    <Table ref="myTable" :tableTitles="titles" :url="this.utils.myurl.sysUserList" :pEdit="updateRole">
    </Table>
    <div style="text-align: left; margin: 20px;">
      <el-button type="primary" @click="dialogFormVisible = true">分配账号</el-button>
    </div>

    <!-- 角色选择的弹出框 -->
    <el-dialog title="角色管理" :visible.sync="dialogRoleVisible">
      <el-tree
        :data="treeData"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :default-checked-keys="checkTree"
        :props="defaultProps">
      </el-tree>


      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRoleVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdateRole()">修 改</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Table from './Table.vue'

export default {
  name: 'SysUserManager',
  components: {Table},
  methods:{
    updateRole(userInfo){
      this.uid = userInfo.uid;
      var vt = this;
      //查询角色信息
      this.utils.myajax({
        type: 'GET',
        url: this.utils.myurl.sysRoleListByUid,
        data: {
          uid: this.uid
        },
        success: function(data){
          //弹出框
          vt.dialogRoleVisible = true;
          vt.treeData = data;
          vt.checkTree = [];
          for(var i = 0; i < data.length; i++){
            if(data[i].checked){
              vt.checkTree.push(data[i].id);
            }
          }
        }
      });
    },
    //提交角色的修改
    submitUpdateRole(){

      //获取当前选中的角色
      var ids = this.$refs.tree.getCheckedKeys();
      var uid = this.uid;

      this.utils.myajax({
        type: 'POST',
        url: this.utils.myurl.sysUserUpdateRole,
        data: {
          uid: uid,
          rids: JSON.stringify(ids)
        },
        success: function(data){
           alert(data);
           dialogRoleVisible = false;
        }
      });
    }
  },
  data(){
    return {
      uid: "",
      mychecked: true,
      dialogRoleVisible: false,
      treeData: [],
      checkTree: [],
      defaultProps: {
        children: 'children',
        label: 'roleName'
      },
      titles: [
        {
          prop: 'uid',
          label: 'id',
          width: '100',
          fixed: true
        },
        {
          prop: 'username',
          label: '账号',
          width: '150',
          fixed: true
        },
        {
          prop: 'nickName',
          label: '昵称',
          width: '150',
          fixed: true
        },
        {
          prop: 'createTime',
          label: '创建时间',
          width: '150',
          fixed: true
        },
        {
          prop: 'updateTime',
          label: '修改时间',
          width: '150',
          fixed: true
        },
        {
          prop: 'status',
          label: '状态',
          width: '150',
          fixed: true
        }
      ]
    }
  }
}
</script>

<style>
</style>
